<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
	</head>
	<body>
		<div id="app">
			<!-- 新增div -->
			<div align="center">
				<h3>用户新增</h3>
				姓名: <input type="text" v-model="addUser.name" />
				年龄: <input type="text" v-model="addUser.age" />
				性别: <input type="text" v-model="addUser.sex" />
				<!-- 点击调用入库函数 -->
				<button @click="addUserBtn">新增</button>
			</div>
			<hr />
			<!-- 修改div -->
			<div align="center">
				<h3>用户修改</h3>
				<p>
					编号: <input type="text" v-model="updateUser.id" disabled/>
					姓名: <input type="text" v-model="updateUser.name" />
				</p>
				<p>
					年龄: <input type="text" v-model="updateUser.age" />
					性别: <input type="text" v-model="updateUser.sex" />
				</p>
				<p>
					<button @click="updateUser">修改</button>
				</p>

			</div>
			<hr />
			<!-- 展现div -->
			<div>
				<table border="1px" align="center" width="80%">
					<tr align="center">
						<th colspan="5">1
							<h3>用户列表</h3>
						</th>
					</tr>
					<tr align="center">
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<!-- 利用循环遍历实现数据展现 -->
					<tr align="center" v-for="user in userList">
						<th v-text="user.id"></th>
						<th v-text="user.name"></th>
						<th v-text="user.age"></th>
						<th v-text="user.sex"></th>
						<th width="20%">
							<button @click="updateUserBtn(user)">修改</button>
							<!-- 调用方法 将"当前"对象传递 -->
							<button @click="deleteUser(user)">删除</button>
						</th>
					</tr>
				</table>
			</div>
		</div>

		<!-- 1.引入类库 vue/axios -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>

		<!-- 2.创建vue对象 -->
		<script>
			//3.定义axios请求的前缀
			axios.defaults.baseURL = "http://localhost:8090/vue"

			const app = new Vue({
				el: "#app",
				data: {
					//定义用户数据
					userList: [],
					//封装新增数据
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					//获取用户信息
					getUserList() {
						axios.get("/findAll")
							.then(promise => {
								//将返回值结果 赋值给vue对象
								this.userList = promise.data
							})
					},
					//实现数据新增
					addUserBtn() {
						axios.post("/saveUser", this.addUser)
							.then(promise => {
								//获取服务器返回值
								let msg = promise.data
								//弹出框操作
								alert(msg)
								//将列表数据刷新
								this.getUserList()
								//新增之后,将数据清空
								this.addUser = {}
							})
					},
					deleteUser(user) {
						//问题: 用户点击删除,如何获取数据?? 
						//答: 传递循环遍历的数据即可.
						axios.delete("/deleteUserById?id=" + user.id)
							.then(promise => {
								//弹出提示信息
								alert(promise.data)
								//刷新列表信息
								this.getUserList()
							})

					},
					updateUserBtn(user) {
						this.getUserList() = user
					},
					// updateUserMe(){
					// 	axios.put("/updateUser",this.updateUser)
					// 	.then(promise =>{
					// 		alert(promise.data)
					// 		this.getUserList()
					// 		this.updateUser = {}
					// 	})
					// 	}
					async updateUserMe(){
						let {data: result}
						=await axios.put("/updateUser",this.updateUser)
						alert(result)
						this.updateUser = {}
						this.getUserList()
					}
				},
				//利用生命周期函数触发ajax
				created() {
					//alert("生命周期函数")
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
